<template>
  <div class="login-form">
    <h1>登录</h1>
    <form @submit.prevent="handleSubmit">
      <!-- 用户名 -->
      <div class="form-group">
        <label for="username">用户名</label>
        <input
            v-model="username"
            type="text"
            id="username"
            placeholder="请输入用户名"
            :class="{'error': usernameError}"
        />
        <span v-if="usernameError" class="error-message">用户名不能为空</span>
      </div>

      <!-- 密码 -->
      <div class="form-group">
        <label for="password">密码</label>
        <input
            v-model="password"
            type="password"
            id="password"
            placeholder="请输入密码"
            :class="{'error': passwordError}"
        />
        <span v-if="passwordError" class="error-message">密码不能为空且至少为8位</span>
      </div>

      <!-- 登录按钮 -->
      <div class="form-actions">
        <button type="submit" :disabled="isSubmitting">登录</button>
      </div>

      <!-- 忘记密码链接 -->
      <div class="form-footer">
        <a href="/forgot-password">忘记密码？</a>
      </div>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      password: '',
      isSubmitting: false,
      usernameError: false,
      passwordError: false,
    };
  },
  methods: {
    async handleSubmit() {
      // 重置错误
      this.usernameError = this.passwordError = false;

      // 表单验证
      if (!this.username) {
        this.usernameError = true;
      }
      if (!this.password || this.password.length < 3) {
        this.passwordError = true;
      }

      // 如果用户名和密码合法
      if (this.username && this.password.length >= 3) {
        this.isSubmitting = true;

        try {
          // 发送 POST 请求到后端
          const response = await axios.post('http://localhost:8080/auth/login', {
            username: this.username,
            password: this.password,
          });

          // 假设后端返回一个包含 token 的响应
          if (response.data && response.data.data) {
            // 假设 token 存储在 localStorage 中

            localStorage.setItem('authToken', response.data.data);
            // 登录成功，跳转到仪表盘
            this.$router.push('/dashboard');
          } else {
            alert('登录失败，请检查用户名和密码');
          }
        } catch (error) {
          console.error('登录请求失败:', error);
          alert('登录失败，请稍后再试');
        } finally {
          this.isSubmitting = false;
        }
      }
    },
  },
};
</script>

<style scoped>
.login-form {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  background-color: #fff;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 1.5rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

label {
  display: block;
  margin-bottom: 0.5rem;
}

input {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}

input.error {
  border-color: #e74c3c;
}

.error-message {
  color: #e74c3c;
  font-size: 0.875rem;
}

button {
  width: 100%;
  padding: 1rem;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:disabled {
  background-color: #bdc3c7;
}

.form-footer {
  margin-top: 1rem;
  text-align: center;
}

.form-footer a {
  color: #3498db;
  text-decoration: none;
}

.form-footer a:hover {
  text-decoration: underline;
}

/* 响应式设计 */
@media (max-width: 600px) {
  .login-form {
    padding: 1.5rem;
  }

  h1 {
    font-size: 1.5rem;
  }
}
</style>
